
<%@tag import="com.epcs.model.dao.EventCategoryDAO"%>
<%@tag import="com.epcs.model.dao.EventDAO"%>
<%@tag import="com.epcs.model.dao.FollowingDAO"%>
<%@tag import="java.util.List"%>
<%@tag import="com.epcs.model.dto.Eventcategory"%>
<%@tag import="com.epcs.model.dto.Account"%>
<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>
<%@ attribute name="active_area" 
	description="1.Lịch cá nhân - 2.Quản lý sự kiện - 
				3.Sự kiện mới - 4.Top sự kiện - 
				5.Thể loại sự kiện - 6.Quản lý hệ thống - 
				7.Đồng bộ bằng tay"
	required="true"%>
<%@ attribute name="subMenuOpen" 
	description="1.Đang theo dõi - 2. Thêm thể loại - 3. Quản lý người dùng - 4. Quản lý Thể loại" 
	required="false" %>
<s:set var="user_role" value="%{#session.USER_ROLE}" />
<s:set var="syncStatus" value="%{#session.SYNC_STATUS}" />
<div class="sidebar" id="sidebar">

	<div class="sidebar-shortcuts" id="sidebar-shortcuts"></div>
	<!-- #sidebar-shortcuts -->

	<ul class="nav nav-list">
		<li <c:if test="${active_area == 1}">class="active"</c:if>	><a href="./Index.do" class="dropdown-toggle">
				<i class="icon-calendar"></i> <span class="menu-text"> Lịch cá nhân </span></b>
			</a></li>
		<li <c:if test="${active_area == 2}">class="active"</c:if>	><a href="ManageEvent.do" class="dropdown-toggle">
				<i class="icon-th"></i> <span class="menu-text"> Quản Lý Sự Kiện </span></b>
			</a></li>
		<li <c:if test="${active_area == 3}">class="active"</c:if>	><a href="NewEvent.do">
				<i class="icon-download"></i> <span class="menu-text"> Sự kiện mới </span>
			</a></li>

		<li <c:if test="${active_area == 4}">class="active"</c:if>	><a href="MostFollowing.do">
				<i class="icon-thumbs-up"></i> <span class="menu-text">Top sự kiện</span>
			</a></li>

		<li <c:if test="${active_area == 5}">class="active"</c:if>	><a href="#007" class="dropdown-toggle">
				<i class="icon-desktop"></i> <span class="menu-text"> Thể loại sự kiện </span> <b class="arrow icon-angle-down"></b>
			</a>

			<ul class="submenu">
				<%
					Account account = (Account)session.getAttribute("USER_INFO");
					FollowingDAO followDAO = new FollowingDAO();
					EventDAO eventDAO =  new EventDAO();
					EventCategoryDAO eventCategoryDAO =  new EventCategoryDAO();
					List<Integer> listCategoryId = followDAO.getCategoryIdListByAccount(account);
					if (listCategoryId != null){
						List<Eventcategory> userCategoryList = eventCategoryDAO.getEventCategoryListByCategoryIdList(listCategoryId);
						
						if (userCategoryList.size() > 0){
							// xóa category bị de-active đang tồn tại trong userCategoryList
							for (int i = 0; i < userCategoryList.size(); i++){
								Eventcategory item = userCategoryList.get(i);
								if (!item.getIsActive()){
									userCategoryList.remove(i);
									i = i - 1;
								}
							}
							
							request.setAttribute("USER_CATEGORY_LIST", userCategoryList);
				%>					
					<li <c:if test="${subMenuOpen == 1}">class="open"</c:if>	><a href="#007" class="dropdown-toggle">
						<i class="icon-chevron-sign-right"></i> <span class="menu-text"> Đang theo dõi </span> 
						<b class="arrow icon-angle-down"></b>
					</a>
					<ul class="submenu"  <c:if test="${subMenuOpen == 1}">style='display:block;'</c:if>	>
					<s:iterator var="item" value="%{#request.USER_CATEGORY_LIST}">
						<li><a href="./EventByCategory.do?categoryID=${item.eventCategoryId}">
							<i class="icon-double-angle-right"></i> ${item.eventCategoryName}
						</a></li>
					</s:iterator>
					</ul>	
					</li>
				<%	
						}	
					}
				%>
				

				<li <c:if test="${subMenuOpen == 2}">class="open"</c:if>	><a href="GetAllCategory.do">
						<i class="icon-chevron-sign-right"></i> Thêm thể loại
					</a></li>

			</ul>
		</li>		
		<s:if test="%{#user_role == 'Admin'}">
		<li <c:if test="${active_area == 6}">class="active"</c:if>><a href="#007" class="dropdown-toggle">
				<i class="icon-wrench"></i> <span class="menu-text">Quản lý hệ thống </span><b class="arrow icon-angle-down"></b>
			</a>
			<ul class="submenu">
				<li <c:if test="${subMenuOpen == 3}">class="open"</c:if>	><a href="ManageUser.do">
						<i class="icon-chevron-sign-right"></i> Quản lý người dùng
					</a></li>
				<li <c:if test="${subMenuOpen == 4}">class="open"</c:if>	><a href="ManageCategory.do">
						<i class="icon-chevron-sign-right"></i> Quản lý thể loại
					</a></li>
			</ul>
		</li>			
		</s:if>
		<li id ="manualSyncButton"
			<s:if test="%{#syncStatus == 'Running' and #syncStatus != null}">style="display:none"</s:if>
			<s:else>style="display:block"</s:else>
			<c:if test="${active_area == 7}">class="active"</c:if>>
				<a href="#007" class="dropdown-toggle" onclick="manualSync()">
					<i class="glyphicon glyphicon-refresh"></i> <span class="menu-text"> Đồng bộ bằng tay </span></b>
				</a>
		</li>
		<li id ="runningSyncButton"
			<s:if test="%{#syncStatus == 'Running' and #syncStatus != null}">style="display:block"</s:if>
			<s:else>style="display:none"</s:else>
			<c:if test="${active_area == 7}">class="active"</c:if>>
				<a href="#007" class="dropdown-toggle">
					<img src="img/loading.gif"/> <span class="menu-text"> Đang đồng bộ... </span></b>
				</a>
		</li>
		
	</ul>
	<!-- /.av-list -->
</div>

<tag:PleaseWaitTag></tag:PleaseWaitTag>


<script>
function accept(message){
    var constMessage = 'Bạn vui lòng chờ trong giây lát!';
    var waitingMessage = $('#waitingMessage');
    if (message != ""){	 	
	    waitingMessage.html(message);
    } else {
		waitingMessage.html(constMessage);
    }
       
    $('#waitingModal').modal({
	  keyboard: false
	});
}
</script>
<script>
var syncThread;
var currentPage = ${active_area == 1};
var manualSyncButton = $('#manualSyncButton');
var runningSyncButton = $('#runningSyncButton');


function autoCheckSynchronization(){
    // 10 giây check 1 lần
    syncThread = setInterval(checkSyncSession,10000);
}

function stopAutoCheckSynchronization(){
    clearInterval(syncThread);
}

function checkSyncSession(){    
    $.ajax({
        url: "CheckSynchronization.do",
        type: "POST",
        success: function (data) {
        	if (data.trim() != "Unauthorized"){
        		
        		if (data.trim() != "Running"){
        		    manualSyncButton.css('display', 'block');
        		    runningSyncButton.css('display', 'none');
        		    
	        		if (data.trim() == 'Success'){	        		    
	        		    alert("Đồng bộ lịch thành công");
	        		    stopAutoCheckSynchronization();
	        		    
	        		    if (currentPage == 1) {
	        				// nếu đang ở trang index thì load lại trang
	        				window.location.href = "Index.do";
	        		    }
	            	} else if (data.trim() == 'Fail'){	        		    
	            		alert('Gặp vấn đề khi đồng bộ! Xin thử lại!');
	            		stopAutoCheckSynchronization();
	            	} else if (data.trim() == 'NotSync'){
	            	    // nothing
	            		
	            	}
            	} else{
            	    // running
        		
            	}
        	} else {
        		window.location.href = "Index.do";
        	}
        },
        error: function (data) {
            alert("Hệ thống gặp vấn đề!");
            manualSyncButton.css('display', 'block');
	    	runningSyncButton.css('display', 'none');
            stopAutoCheckSynchronization();
        }
    });    
}

function manualSync(){
    manualSyncButton.css('display', 'none');
    runningSyncButton.css('display', 'block');
    
    accept('Đang khởi tạo kết nối đến dịch vụ bên ngoài hệ thống...');
    
    $.ajax({
        url: "ManualSynchronization.do",
        type: "POST",
        timeout:180000,
        success: function (data) {
            $('#waitingModal').modal('hide');
            
        	if (data.trim() != "Unauthorized"){
        		
        		if (data.trim() == 'Running'){
//         		    $('#waitingModal').modal({
//         			  keyboard: false
//         			});
					autoCheckSynchronization();
        		} else if (data.trim() == 'RunningBefore'){
        		    alert('Hệ thống vẫn chưa đồng bộ xong! Xin vui lòng chờ trong giây lát!');
					autoCheckSynchronization();
  				} else{
//         		    document.write(data);
					manualSyncButton.css('display', 'block');
			    	runningSyncButton.css('display', 'none');
			    	var y;
			    	var length = $.parseHTML(data).length; 
			    	y  = ($.parseHTML(data)[length - 2]).getElementsByClassName("main-content")[0].innerHTML;
					
					$('.main-content')[0].innerHTML = y;
					
        		}   
        	} else {
        		window.location.href = "Index.do";
        	}
        },
        error:function(x, t, m) {
            $('#waitingModal').modal('hide');
            manualSyncButton.css('display', 'block');
	    	runningSyncButton.css('display', 'none');
            stopAutoCheckSynchronization();
            
            if(t==="timeout") {
                alert("Thời gian khởi tạo kết nối vượt quá giới hạn cho phép! Xin vui lòng thử lại vào khi khác!");
            } else {
        		alert("Hệ thống gặp vấn đề khi đồng bộ! Xin vui lòng thử lại!");                
            } 
            
        }
    });
}
</script>

<s:if test="%{#syncStatus == 'Running' and #syncStatus != null}">
	<script>
	$(document).ready(function(){
	//  $('#waitingModal').modal({
	//	  keyboard: false
	//	});
	//  $('#waitingModal').modal('hide')
		autoCheckSynchronization()
	});
	</script>
</s:if>

